// app.js
// 注意:webpack严格按照import顺序打包
import './common/element_ui_2_13_2.css'
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import { createRouter } from './router/index'
import { createStore } from './store/index'
import tool from './utils/tool'
import globalVar from './utils/globalVar'
import './wwwstatic/common/zldata_jssdk.js'
import zlData from '@/wwwstatic/common/zldata.js'
import VueLazyLoad from 'vue-lazyload'
import directives from './utils/directives'

/*
  因单线程机制，在服务端渲染中有相似于单例的操做，全部的请求都会共享这个单例的操做，因此应该使用工厂函数来确保每一个请求之间的独立性。
  app.js主要是 export 一个createApp函数。
*/
//当进入浏览器后注入埋点js文件，将埋点方法挂载到vue并且执行页面浏览事件上报
if (tool.isBrowser()) {
  let { zla } = zlData
  Object.keys(zla).forEach(key => {
    let item = zla[key]
    if (tool.getType(item) === 'function') {
      Vue.prototype[key] = function() {
        return zla[key].apply(this, arguments)
      }
    } else {
      Vue.prototype[key] = item
    }
  })
  //客户端绑定环境
  Vue.prototype.isClientProd = location.href.includes(globalVar.PcProdDomain)
}
// 在浏览器端，注入全局指令
if (tool.isBrowser()) {
  Object.keys(directives).forEach(key => {
    Vue.directive(key, directives[key])
  })
}
// 懒加载全局注册
Vue.use(VueLazyLoad, {
  loading: '//image.zlketang.com/public/news/images/new_official/other/lazy-loading.png', // 正在加载时显示的图片路径
  error: '//image.zlketang.com/public/news/images/new_official/other/lazy-loading.png', // 图片加载失败时显示的图片路径
  attempt: 3 // 图片加载失败后重试次数，默认3
})
//  总线通信方式
Vue.prototype.$bus = new Vue()
Vue.use(ElementUI)
// 将zlTool下的所有方法挂载到Vue.prototype下面。
Object.keys(tool).forEach(key => {
  let item = tool[key]
  if (tool.getType(item) === 'function') {
    Vue.prototype[key] = function() {
      return tool[key].apply(this, arguments)
    }
  } else {
    Vue.prototype[key] = item
  }
})
// 将全局变量引入并挂载到vue示例上
Object.entries(globalVar).forEach(([key, value]) => {
  Vue.prototype[key] = value
})
Vue.config.silent = false
Vue.config.devtools = true

Vue.config.warnHandler = function(err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // console.log(err)
  // 只在 2.2.0+ 可用
}
export const createApp = () => {
  // Vue.use(MetaInfo)
  const store = createStore()
  const router = createRouter()
  // 注入 router store 到根 Vue 实例
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })
  /**
   * 导出 router and store.
   */
  return { app, router, store }
}
